<template>
    <div class="menu" @click="getItemIndex">
    {{ item.title }}
  </div>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/types/category';

const props = defineProps<{
  item: AnyObject,
  index: number
}>()

const emits = defineEmits<{
  (e: 'getItemIndex', index: number): void,
}>()


/* 触发自定义事件的回调 */
const getItemIndex = () => {
  emits("getItemIndex", props.index)
}
</script>

<style lang="less" scoped>
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 50px;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid #d7d7d7;
  font-size: 14px;
  color: #72727b;
}
</style>